<template>
	<view class="">
		<view style="height: 1rpx;"></view>
		<view class="top">
			
			<button class="top-item" style="background-color: #ffffff;border-radius: 0;padding: 0;" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				<text class="top-item-title">头像</text>
			
				<image :src="headimg" class="headimg" style="margin-left: auto;">
				
				</image>
			</button>
			
			
			<view class="top-item">
				<text class="top-item-title"> <text class="star">*</text>微信昵称</text>
				<input type="nickname"  @blur="nickNameInput" v-model="nickName" @input="nickNameInput"
				placeholder="请填写" class="placeholder-view">
			</view>
			
			<view class="top-item">
				<text class="top-item-title"><text class="star">*</text>手机号</text>
				<text class="top-item-content">{{mobile}}</text>
			
			</view>
			
			<view class="top-item">
				<text class="top-item-title"> <text class="star">*</text>姓名</text>
				<input type="text" :value="realName"  @input="realNameInput"
				placeholder="请填写" class="placeholder-view">
			</view>
			
			<view class="top-item">
				<text class="top-item-title"> <text class="star">*</text>微信号</text>
				<input type="text" :value="wxNo"   @input="wxNoInput"
				placeholder="请填写" class="placeholder-view">
			</view>
			
			<view class="top-item2">
				<text class="top-item-title"> <text class="star">*</text>邮箱</text>
				<input type="text" :value="email" @input="eMailInput"
				placeholder="请填写" class="placeholder-view">
			</view>
			
			
			
		</view>
		
		<view class="view-bottom">
			<view class="view-bottom-s">
				<view class="view-bottom-b" @click="saveIt">
					保存
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let app = ''
	import verify from '@/pages/utils/verifyUtils.js'
	import requsetFileId from '@/pages/utils/upload.js'
	export default{
		data(){
			return{
				// needAdapt: false, //判断是不是苹果x以上机型
				headimg:getApp().globalData.baseImageUrl+'/mine_moren.png',
				headimgUpload:'',
				nickName:'',
				mobile:'',
				wxNo:'',
				realName:'',
				email:'',
				userInfo:null,
				
			}
		},
		onLoad() {
			app = getApp()
			var _this = this
			
			// _this.needAdapt = app.globalData.needAdapt && app.globalData.isIPhone
			_this.userInfo = app.globalData.userInfo
			if(_this.userInfo!=null){
				let avatarPic = ''
				if(verify.isNotEmpty(_this.userInfo.avatarPic)){
					if(_this.userInfo.avatarPic.indexOf('http')<0){
						avatarPic = _this.$imageUrls({picUrls: _this.userInfo.avatarPic})
					}
					
					_this.headimg = avatarPic
					// _this.headimgUpload = avatarPic
				}
			
				_this.nickName =  verify.isNotEmpty(_this.userInfo.nickName) ? _this.userInfo.nickName:''
				_this.mobile = _this.userInfo.mobile
				_this.realName =  verify.isNotEmpty(_this.userInfo.realName) ? _this.userInfo.realName:''
				_this.wxNo = _this.userInfo.wxNo
				_this.email = _this.userInfo.email
				
			}
			console.log(_this.headimg)
			
		},
		onShow() {
			
		},
		mounted() {
			
		},
		methods:{
			async onChooseAvatar(e){
				console.log(e)
				this.headimg = e.detail.avatarUrl
				// 
				let uploadPath = e.detail.avatarUrl
				let fileSuffixArray = uploadPath.split('.')
				
				let fileSuffix = fileSuffixArray[1]
				let name = '1.'+fileSuffixArray[1]
				let ossPath = 'avatar'
				uni.showLoading({
					title:'正在上传...'
				})
				const uploads = await requsetFileId.getPath(ossPath,uploadPath,name)
				console.log('用户头像uploads',uploads)
				uni.hideLoading()
				this.headimgUpload = uploads
			},
			/**
			 * 保存
			 */
			async saveIt(){
				
				let _this = this
				// console.log(this.nickName)
				// return
				
				if(!verify.isNotEmpty(_this.nickName)){
					uni.showToast({
						title:'微信昵称不能为空',
						icon:'none'
					})
					return
				}
				if(!verify.isNotEmpty(_this.wxNo)){
					uni.showToast({
						title:'微信号不能为空',
						icon:'none'
					})
					return
				}
				if(!verify.isNotEmpty(_this.realName)){
					uni.showToast({
						title:'姓名不能为空',
						icon:'none'
					})
					return
				}
				
				if(!verify.isNotEmpty(_this.email)){
					uni.showToast({
						title:'邮箱不能为空',
						icon:'none'
					})
					return
				}
				
				let data = {
					id:_this.userInfo.accId,
					nickName:_this.nickName,
					avatarPic:_this.headimgUpload,
					realName:_this.realName,
					wxNo:_this.wxNo,
					email: _this.email,
				}
				const res = await _this.$myRequest({
					url: "/oauth/userinfo",
					header: {
						"Content-Type":"application/json",
						"token":uni.getStorageSync("accessToken")
					},
					data,
					method:'put'
				})
				console.log('修改用户信息',res)
				if(res.data.code==200){
					uni.showToast({
						title:"保存成功!",
						icon:"success",
						duration:1500
					})
					_this.getUser()
				}
			},
			async getUser(){
				let _this = this
			
				const res = await _this.$myRequest({
					url: "/oauth/userinfo",
					header: {
						"Authorization":"Basic ZG90Z286ZG90Z28=",
						"token":uni.getStorageSync("accessToken")
					},
				})
				
				console.log('返回用户信息结果',res)
				if(res.data.code==200){
					app.globalData.userInfo = res.data.data
					
				}
				// uni.navigateBack()
			},
			
			nickNameInput(e){
				console.log(e)
				this.nickName = e.detail.value
				
			},
		
			realNameInput(e){
				this.realName = e.detail.value
			},
			wxNoInput(e){
				this.wxNo = e.detail.value
			},
			eMailInput(e){
				this.email = e.detail.value
			},
		}
	}
</script>

<style>
	page{
		background-color: #f7f7f7;
	}
</style>
<style lang="scss" scoped>
	.top{
		background-color: #ffffff;
		padding-left: 32rpx;
		padding-right: 32rpx;
	}
	.top-item{
		height: 100rpx;
		border-bottom: 1rpx #eeeeee solid;
		display: flex;
		align-items: center;
	}
	.top-item2{
		height: 100rpx;
		display: flex;
		align-items: center;
	}
	.top-item-title{
		// width: 120rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}
	.headimg{
		width: 80rpx;
		height: 80rpx;
		// margin-left: auto;
		border-radius: 80rpx;
	}
	.avatar-wrapper{
		width: 180rpx;
		height: 80rpx;		
		 background-color: #fff;
		 border-radius:0;
	
	}
	button::after {
	  border: none;
	}
	
	.top-item-content{
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		margin-left: auto;
	}
	
	.placeholder-view{
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		margin-left: auto;
		text-align: right;
		width: 540rpx;
	}
	
	
	.view-bottom{
		position: fixed;
		width: 100%;
		bottom: 0;
		background-color: #ffffff;
		padding-bottom: env(safe-area-inset-bottom); // 适配iphoneX的底部
	}
	.view-bottom-s{
		height: 108rpx;
		display: flex;
		align-items: center;
	}
	.view-bottom-b{
		width: 686rpx;
		height: 88rpx;
		background: #2DA9C5;
		border-radius: 58rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #E8F7FB;
		line-height: 50rpx;
		margin-left: 32rpx;
	}	
	.star{
		color: #FF6132;
	}
</style>